<template>
    <el-row>
        <el-col :span="10">
            <el-text>用户名称或手机号</el-text>
            <el-input type="text" v-model="search.SearchText" style="width: 200px;" clearable/>           
        </el-col>
        <el-col :span="3">
            <el-button type="primary" effect="dark" @click="SelectData">查询</el-button>
        </el-col>
        <el-col :span="3">
            <el-button type="warning" effect="dark" @click="DelUserALL">批删</el-button>
        </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection"  width="55" />

      <el-table-column prop="userId" label="用户ID" width="100" />
      <el-table-column prop="userName" label="用户名称" width="100" />
      <el-table-column prop="nickName" label="用户昵称" width="100" />
      <el-table-column prop="phone" label="手机号" width="100" />
      <el-table-column prop="email" label="邮件" width="100" />
      <el-table-column prop="roleList" label="角色列表" >
        <template #default="{row}">
            <el-tag
      v-for="item in row.roleList"
      :key="item.roleId"
      type="success"
      effect="dark"
      style="margin-right:3px"
      size="large"
    >
      {{ item.roleName }}
    </el-tag>
        </template>
        </el-table-column>
      <el-table-column  label="操作" >
        <template #default="{row}">
          <el-button type="primary" @click="edit(row.userId)" >修改</el-button>
          <el-button type="danger"  @click="delUser(row.userId)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
    <table>
        <tr>
            <td>
                <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, sizes"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
   共{{ page.totalCount }}条数据,每页{{ page.PageSize }}条数据，
   第{{ page.PageIndex }}/{{ page.totalPage }}页
  </el-pagination>
            </td>
            <td>
                <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, prev, pager, next"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    >
    <el-button type="primary"  @click="handleCurrentChange(1)" :disabled="page.PageIndex==1" >
      首页
    </el-button>
  </el-pagination>
            </td>
            <td>
                <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    <el-button type="primary"  @click="handleCurrentChange(page.totalPage)" :disabled="page.PageIndex==page.totalPage" >
      尾页
    </el-button>
  </el-pagination>
            </td>
        </tr>
    </table>
  </template>
  
  <script lang="ts" setup>
      import { ElMessage,ElMessageBox } from 'element-plus'
  import axios from 'axios'
  import { reactive, ref,onMounted } from 'vue'
  import { useGoodStore } from '@/stores/counter';
  const useStore=useGoodStore();
  import {useRouter} from 'vue-router'
  const router=useRouter();

const multipleSelection = ref<User[]>([])
  const userIds:any=ref([]);

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
  console.log(multipleSelection.value);
  userIds.value=multipleSelection.value.map((item:any)=>{
    return item.userId
  })
  console.log(userIds.value.toString());
}
 const DelUserALL=()=>{
  ElMessageBox.confirm(
    '确定删除吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete('/api/User/UserDelALL',{
        params:{
            ids:userIds.value.toString()
        }
      })
      .then(res=>{
        if(res.data.isSuc)
      {
        ElMessage.success(res.data.msg);
        page.PageIndex=1;
        loadData();
      }
      else
      {
        ElMessage.error(res.data.msg);
      }
      })
    })
 }

  const delUser=(userId:number)=>{
    ElMessageBox.confirm(
    '确定删除吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
     axios.delete('/api/User/UserDel',{
      params:{
        userId:userId
      }
     })
     .then(res=>{
      if(res.data.isSuc)
      {
        ElMessage.success(res.data.msg);
        page.PageIndex=1;
        loadData();
      }
      else
      {
        ElMessage.error(res.data.msg);
      }
     })
    })
  }
    const edit=(uid:number)=>{
      router.push('/editUser');
      useStore.uid=uid;
    }

  const handleSizeChange = (val: number) => {
 page.PageSize=val;
 loadData();
}
const handleCurrentChange = (val: number) => {
  page.PageIndex=val;
  loadData();
}


  interface User{
    userId: number,
        userName: string,
        nickName: string,
        phone: string,
        email: string,
        roleList:[]
  }
  interface Role{
    roleId: number,
    roleName: string
  }
  const tableData = ref<User[]>([])

  const page=reactive({
    PageIndex:1,
    PageSize:3,
    totalCount:0,
    totalPage:0
  })
  const search=reactive({
    SearchText:""
  })
  onMounted(()=>{
    loadData();
  })
  const loadData=()=>{
    axios.get('/api/User/GetUser',{
        params:{
            PageIndex:page.PageIndex,
            PageSize:page.PageSize,
            SearchText:search.SearchText
        }
    })
    .then(res=>{
        tableData.value=res.data.data.data;
        page.totalCount=res.data.data.totalCount;
        page.totalPage=res.data.data.totalPage;
    })
  }
  const SelectData=()=>{
    page.PageIndex=1;
    loadData();
  }


  </script>
  